<template>
  <div class="sideMenuWrapper">
    <div class="logo" :style="menuStore.hideMenu?'width: 64px;':'width:260px'">
      <img :src="menuStore.hideMenu?minLogoPath:logoPath" alt="">
    </div>
    <el-menu
      :default-active="activePath"
      :router="true"
      :collapse="menuStore.hideMenu"
      class="el-menu-vertical-demo"
      @select="handleSelect"
    >
      <el-menu-item
        v-for="item in sideMenu"
        :name="item.name"
        :key="item.path"
        :index="item.path"
        :title="item.name"
      >
        <div class="iconBox">
          <!-- element-plus内置图标 -->
          <component
            :is="item.icon"
            class="menu-icon"
            v-if="(typeof item.icon) != 'string'"
          />
          <!-- 自定义svg图标 -->
          <CXSvgIcon
            :class="'menu-icon svg-icon ' + item.icon"
            :name="item.icon"
            v-if="(typeof item.icon) === 'string'"
          />
        </div>

        <span v-if="!menuStore.hideMenu">{{ item.name }}</span>
      </el-menu-item>
    </el-menu>
  </div>
</template>
<script lang="ts" setup>
import { sideMenu } from '@/router';
import { onMounted, ref } from 'vue';
import { useMenuStore } from '@/stores/useMenuStore';
import logoPath from '@/assets/images/工匠行科技.png';
import minLogoPath from '@/assets/images/smallLogo.png';
import CXSvgIcon from 'baseCom/CXSvgIcon/index.vue';

const menuStore = useMenuStore()
const activePath = ref('')

const handleSelect = (e:any) => {
  activePath.value = e
}
onMounted(() => {
  if(sideMenu && sideMenu.length > 0){
    activePath.value = sideMenu[0]?.path || ""
  }
})
</script>
<style lang="scss" scoped>
@use './side-menu.scss';
</style>
